
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<style>
    .top{
        width:600px;
        height: 30px;
        border: 1px solid black;
        line-height: 30px;
        border-collapse: collapse;
    }
     tr{
        border: 1px solid black;
    }
     td,th{
        border: 1px solid black;
        line-height: 30px;
    }
    input{
        outline: none;
        color: gray;
    }
    .top1,.top2{
        margin-bottom: 20px;
    }
    th{
        background-color: greenyellow;
    }
    #footer{
        width: 600px;
        text-align: center;
        line-height: 30px;
    }
   #tbody td{
    text-align: center;

   }
</style>
<body>
    <div id="app">
        <table class="top top1">
            <tr>
                <td>
                    编号：<input type="text" v-model='text_value'>
                    品牌名称：<input type="text" v-model='input_value'>
                    <!-- 动态绑定编号和品牌名称的数据 -->
                    <button @click='addFn' :disabled="text_value&&input_value?false:true" >添加</button>
                    <!-- 做一个三元表达式，目的是 只有编号和品牌名称都是数据的时候才能进行添加 -->
                </td>
            </tr>
        </table>
        <table class="top top2"> 
            <tr>
                <td>
                    品牌名称：<input type="text" value="请输入搜索条件" v-model='search'>
                </td>
            </tr>
        </table>
        <table class="top">
            <thead>
                <tr>
                    <th>{{bianHao}}</th>
                    <th>{{pinPai}}</th>
                    <th>{{shiJian}}</th>
                    <th>{{caoZuo}}</th>
                </tr>
            </thead>
            <tbody id="tbody">
                <tr v-for='(item,index) in searchArr' :key='item.id'>
                    <td>{{item.bianhao}}</td>
                    <td>{{item.mingCheng}}</td>
                    <td>{{item.time}}</td>
                    <td><button @click='del(item)'>删除</button></td>
                    <!-- del()中传入一个参数，为index -->
                </tr>
            </tbody>
        </table>
        <!-- 表示当arr的长度为0时，才显示下面这句话 -->
        <div id="footer" v-show='!searchArr.length'>没有更多数据</div>
    </div>
</body>
</html>
<script>
    const vm = new Vue({
        el:'#app',
        data:{
            text_value:'',
            input_value:'',
            bianHao:'编号',
            pinPai:'品牌名称',
            shiJian:'创立时间',
            caoZuo:'操作',
            // arr:[],
            arr:JSON.parse(localStorage.getItem('qf-table')),
            search:'',
        },
        methods:{
          addFn(){ //添加事件
            // console.log(this.text_value);
            //做一个判断，如果输入的值不为空则，创建一个对象
            if(this.text_value&&this.input_value){
                
                //新键一个对象，
                let newArr = {
                    // substr字符串截取  toString转换成字符串
                    id:Math.random().toString(32).substr(2), //生成一个唯一的值，用于:key
                    bianhao:this.text_value,
                    mingCheng:this.input_value,
                    time:new Date().toLocaleString(),
                }
                console.log(this.arr);
                // 将这个新建的对象添加到数组中
                this.arr.push(newArr)
                // localStorage.setItem('qf-table',JSON.stringify(this.arr))
                // 当点击完成后，让他们的值为空
                this.text_value='',
                this.input_value=""
            }
          },
          del(item){
               //截取字符串
            //    console.log(item,666);
            //    在arr中，移除当前的数据
            // 通过当前数据的id
            // 依旧使用filter 只要返回的id不等于当前的item的id的对象就可以了
               this.arr=this.arr.filter(v=>v.id!==item.id) //表示过滤掉id不等于item中的数据
            //    this.arr.splice(i,1)
            // console.log(this.arr,6666);
            //    localStorage.setItem('qf-table',JSON.stringify(this.arr))
           }
        },
        computed: { //通过计算属性完成搜索功能
            searchArr(){
                // console.log(this.search);//打印的是输入的内容
                // console.log(this.arr); //打印的是本地的数组
                // console.log(this.arr.filter(item=>item.mingCheng.indexOf(this.seacrh)!==-1));//打印的是满足条件的数组
                // 通过indexof可以实现搜索功能 indexOf('检索的文字'，'开始的位置（index）')，如果能够搜索到就会返回该字符串的索引，搜索不到就返回-1
                return this.arr.filter(item=>item.mingCheng.indexOf(this.search)!==-1)
            }
        },
        watch: { //通过watch进行监听,此时数据一发生变化就进行本地存储
            'arr'(newVal,oldVal){
                console.log(newVal);
                localStorage.setItem('qf-table',JSON.stringify(this.arr))
            }
            
        }
    }) 
</script>

